<template>
  <div id="my_header">
    <div @click="is_show_result = false">
      <!-- 输入框 -->
      <div>
        <section
          :class="{ ml_330: !$store.state.left_nav_flag }"
          class="input_group"
          @click.stop
          v-if="
            $route.params.model != 'search' &&
              $route.params.model != 'searchRoot' &&
              $route.params.model != 'liveSearchRoot'
          "
        >
          <div class="dropdown">
            <el-dropdown
              size="small"
              placement="bottom"
              trigger="click"
              @command="batchOperate"
              style
            >
              <el-button class="search-btn" size="mini">
                <img src="@/assets/zhao/dylogo.png" class="ddlogo" /> 抖音
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu class="batch-menu" slot="dropdown">
                <el-dropdown-item command="batch_remarks">
                  <img src="@/assets/zhao/dylogo.png" class="ddlogo" />抖音
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <input
            type="text"
            v-model="input01"
            @click.stop="Inputfocus"
            @keyup.enter="search_input()"
            placeholder="搜索达人、商品、直播间"
          />
          <div class="input_group-img" @click="search_input()">
            <img src="@/assets/meng/search01.png" />
          </div>
          <!-- 历史记录 -->
          <section
            class="result_wraper"
            ref="resultWraper"
            v-show="isHide && history_data.length !== 0 && input01.length == 0"
          >
            <ul class="history" :class="{ posi_ab: !$store.state.left_nav_flag }">
              <li>
                <span>搜索记录</span>
                <img src="@/assets/zhao/delete.png" @click="remove_itemout(history_data)" />
              </li>

              <li class="pointer" v-for="(item, index) in history_data" :key="'history' + index">
                <span @click="history_click(item.log)">{{ item.log }}</span>
                <img src="@/assets/meng/my_header01.png" @click="remove_item(item.id)" class="appa" />
              </li>
            </ul>
          </section>
        </section>
        <section v-else></section>
        <!-- <img src="@/assets/wang/work/znfx.png"
             style="width: 113px; margin-left: 20px; cursor: pointer"
             @click="toMatch"
             v-if="
            $route.params.model != 'search' &&
            $route.params.model != 'searchRoot' &&
            $route.params.model != 'liveSearchRoot'
        " />-->
      </div>
      <!-- <div class="activity_btn" v-if="$route.params.model != 'buy'"> -->
      <!-- <div class="activity_btn">
        <img src="/static/huodong_svip.gif"  @click="vipActivity" alt="限时超值活动">
      </div> -->
      <div class="nkhd_btn">
        <img src="@/assets/shi/nkhd.png"  @click="toMember" alt="买年卡送礼包">
      </div>
      <div class="down_app">
        <div class="help_give_vip" @click="$router.push('/talent_main/sendMembers')">
          <img class="bgc_img" src="@/assets/shi/help_vip.png" alt="">
          <img class="btn_img" src="@/assets/shi/help_btn_go.png" alt="">
        </div>
        <el-popover placement="bottom" trigger="hover">
          <div class="frame_box">
            <div class="code_img">
              <img src="@/assets/shi/down_ewm.png" alt="">
            </div>
             <p
              style="
                text-align: center;
                font-size: 14px;
                color: #888888;
                margin-top: 10px;
              "
            >扫码下载APP</p>
          </div>

          <div slot="reference" class="down_app_box">
            <img src="@/assets/shi/mobilePhone.png" alt="">
            <span>下载APP</span>
          </div>
        </el-popover> 
      </div>
      <section class="avatar">
        <!-- <img v-if="photo == ''" src="@/assets/meng/touxiang.png" />
        <img v-else :src="photo" />-->
        <!-- 钻石等级 -->
        <img v-if="photo" :src="photo" />
        <img v-else src="@/assets/meng/touxiang.png" />
        <div v-if="photo" class="vip_wrap">
          <img
            v-if="person_message && person_message.vipLevel == 0"
            src="@/assets/shi/vip1.png"
            alt
          />
          <img
            v-if="person_message && person_message.vipLevel == 3"
            src="@/assets/shi/vip2.png"
            alt
          />
          <img
            v-if="person_message && person_message.vipLevel == 4"
            src="@/assets/shi/vip3.png"
            alt
          />
          <img
            v-if="person_message && person_message.vipLevel == 1"
            src="@/assets/shi/vip4.png"
            alt
          />
          <img
            v-if="person_message && person_message.vipLevel == 5"
            src="@/assets/shi/vip4.png"
            alt
          />
          <img
            v-if="person_message && person_message.vipLevel == 2"
            src="@/assets/shi/vip5.png"
            alt
          />
        </div>
        <!-- 个人信息 -->
        <UserInfoPop :person_message="person_message"/>
      </section>
      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        :class="{ open_loading: !$store.state.left_nav_flag }"
      ></div>
      <!-- 搜索结果 -->
      <section
        class="result_wraper"
        ref="resultBox"
        @click="is_show_result = false"
        v-if="is_show_result && !loading"
      >
        <div class="result" :class="{ posi_ab: !$store.state.left_nav_flag }" @click.stop>
          <!-- <div
            v-loading="loading"
            v-if="loading"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>-->
          <!-- 原来的   达人-商品   的搜索结果  的位置 -->
          <!-- 达人 -->
          <div class="result_item" v-if="!loading && response">
            <div class="video_header">
              <section>
                <img src="@/assets/zhao/border.png" />
                <span>达人</span>
                <span>搜索到{{ response.author_count }}个结果</span>
              </section>
              <span
                class="more"
                @click="
                  is_show_result = false;
                  $router.push(`/talent_main/search?keyword=${input01}`);
                "
              >更多</span>
            </div>
            <section>
              <div v-if="response.author.length != 0" class="talentbox">
                <div
                  class="video_content"
                  v-for="(item, index) in response.author.slice(0, 4)"
                  :key="'result_content01' + index"
                  @click="go_to_page01(item.author_id)"
                >
                  <div class="head_box">
                    <img
                      :src="item.logo"
                      @click="go_to_page01(item.author_id)"
                      @error="errorImg(superman,$event)"
                    />
                    <div class="live_gif_box" v-if="item.live_status == 1 ">
                      <p class="livingGif">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                      </p>
                    </div>
                  </div>
                  <div class="list_box">
                    <div>
                      <span
                        class="dot dotdot"
                        @click="go_to_page01(item.author_id)"
                      >{{ item.nickname }}</span>
                    </div>

                    <div class="fans">
                      <span>{{ format_num(item.total_fans) }}粉丝</span>
                    </div>
                  </div>
                  <!-- <button @click="go_to_page03(item.room_id)">详情</button> -->
                </div>
              </div>
              <p v-else class="liveNull">
                <img src="@/assets/zhao/zanwu_06.gif" />
                <span>暂无数据</span>
              </p>
            </section>
          </div>
          <!-- 商品 -->
          <div class="result_item" v-if="!loading && response">
            <div class="video_header" style="padding-top:20px;">
              <section>
                <img src="@/assets/zhao/border.png" />
                <span>商品</span>
                <span>搜索到{{ response.pro_count }}个结果</span>
              </section>
              <span
                class="more"
                @click="
                  is_show_result = false;
                  $router.push(`/talent_main/searchRoot?keyword=${input01}`);
                "
              >更多</span>
            </div>
            <section>
              <div v-if="response.product.length != 0" class="goodsbox">
                <div
                  class="video_content"
                  v-for="(item, index) in response.product.slice(0, 4)"
                  :key="'result_content02' + index"
                  @click="go_to_page02(item.pro_id)"
                >
                  <div class="cover_box">
                    <img
                      :src="item.logo"
                      @click="go_to_page02(item.pro_id)"
                      @error="errorImg(shop,$event)"
                    />
                  </div>
                  <div class="text_box">
                    <div class="dot dotdot" @click="go_to_page02(item.pro_id)">{{ item.title }}</div>
                    <div class="price">￥{{ item.price }}</div>
                  </div>
                  <!-- <button @click="go_to_page03(item.room_id)">详情</button> -->
                </div>
              </div>
              <p v-else class="liveNull">
                <img src="@/assets/zhao/zanwu_06.gif" />
                <span>暂无数据</span>
              </p>
            </section>
          </div>
          <!-- 直播记录 -->
          <div class="result_item" v-if="!loading && response">
            <div class="video_header" style="padding-top: 20px;">
              <section>
                <img src="@/assets/zhao/border.png" />
                <span>直播记录</span>
                <span>搜索到{{ response.live_count }}个结果</span>
              </section>
              <span
                class="more"
                @click="
                  is_show_result = false;
                  $router.push(
                    `/talent_main/liveSearchRoot?keyword=${input01}`
                  );
                "
              >更多</span>
            </div>
            <section>
              <div v-if="response.live.length != 0" class="recordbox">
                <div
                  class="video_content"
                  v-for="(item, index) in response.live.slice(0, 4)"
                  :key="'result_content03' + index"
                  @click="go_to_page03(item.room_id)"
                >
                  <div class="cover_box">
                    <img
                      :src="item.room_logo"
                      @click="go_to_page03(item.room_id)"
                      @error="errorImg(liveVideo,$event)"
                    />
                    <div class="live_gif_box" v-if="item.status == 1 ">
                      <p class="livingGif">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                      </p>
                    </div>
                  </div>
                  <div class="list_box">
                    <div
                      class="dot dotdot"
                      @click="go_to_page03(item.room_id)"
                    >{{ item.room_title }}</div>
                    <div>
                      <img :src="item.logo" />
                      <span class="dot dotname">{{ item.nickname }}</span>
                    </div>
                  </div>
                  <!-- <button @click="go_to_page03(item.room_id)">详情</button> -->
                </div>
              </div>
              <p v-else class="liveNull">
                <img src="@/assets/zhao/zanwu_06.gif" />
                <span>暂无数据</span>
              </p>
            </section>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import UserInfoPop from "@/component/UserInfoPop.vue";
import superman from '@/assets/img/superman.png';
import shop from '@/assets/img/shop.png';
import liveVideo from '@/assets/img/live-video.png';
export default {
  name: 'my_header',
  components: {UserInfoPop},
  data() {
    return {
      superman: superman,
      shop: shop,
      liveVideo: liveVideo,
      input01: '', //输入框绑定
      history: false, //搜索记录框显示隐藏
      history_data: [], //搜索记录存放
      cancel01: null,
      response: null,
      loading: false,
      is_show_result: false,
      photo: '',
      person_message: null,
      history: false,
      isHide: false,
    };
  },
  watch: {
    $route(to, from) {
      if (localStorage.getItem('photo')) {
        this.photo = localStorage.getItem('photo');
      } else {
        this.photo = '';
      }
      // console.log('photo1',this.photo);
    }
  },
  created() {
    if (localStorage.getItem('photo')) {
      this.photo = localStorage.getItem('photo');
    } else {
      this.photo = '';
    }
    // console.log('photo2',this.photo);
    if (localStorage.getItem('level')) {
      this.level = localStorage.getItem('level');
    }
    this.get_person();
    // if (localStorage.getItem("history_data")) {
    //   this.history_data = JSON.parse(localStorage.getItem("history_data"));
    // }
    // this.get_person();
    this.$watch('$route.path', (newValue, oldValue) => {
      this.is_show_result = false;
    });
    this.$watch('input01', (newValue, oldValue) => {
      this.is_show_result = false;
    });
    document.addEventListener('click', e => {
      if (this.$refs.resultWraper) {
        let isSelf = this.$refs.resultWraper.contains(e.target);
        if (!isSelf) {
          this.isHide = false;
        }
      }
      if (this.$refs.resultBox) {
        let isSelfRusultBox = this.$refs.resultBox.contains(e.target);
        if (!isSelfRusultBox) {
          this.is_show_result = false;
        }
      }
    });

    // this.person_message = this.$store.state.userInfo; //用户信息
  },
  mounted() {
    // window.addEventListener('click', this.clickOther)
    this.$bus.$on('invitationCount',(data)=>{
      this.get_person()
    })
  },

  beforeDestroy() {
    // 实例销毁之前对点击事件进行解绑
    // window.removeEventListener('click', this.clickOther)
    this.$bus.$off('invitationCount')
  },
  filters: {
    filtLevelName(level) {
      let name = '';
      if (level == 0) {
        name = '免费版';
      } else if (level == 1) {
        name = 'SVIP';
      } else if (level == 2) {
        name = 'Plus';
      } else if (level == 3) {
        name = '体验版';
      } else if (level == 4) {
        name = 'VIP';
      }
      return name;
    }
  },
  methods: {
    // 默认图片显示
    errorImg(url, event) {
      if (url == superman) {
        event.target.src = superman;
      } else if (url == shop) {
        event.target.src = shop;
      } else if (url == liveVideo) {
        event.target.src = liveVideo;
      }
    },
    toMember(){
      this.$router.push("/talent_main/buy?showTip="+true)
    },
    vipActivity() {
      this.$store.commit('huoDongPopup', true);
    },
    freeGetVip() {
      this.$store.commit('getSvipPopup', true);
    },
    // getVipActive() {
    //   this.$axios.get('/api/customer/getVipActive').then(res => {
    //     let isPop = localStorage.getItem('huoDongPopup');
    //     if (!isPop && res.data.data.type == 3) {
    //       //退出登录都要清除，老用户每次登录进来都要弹出活动弹框
    //       this.$store.commit('huoDongPopup', true);
    //       localStorage.setItem('huoDongPopup', 1);
    //     }
    //     if(res.data.data.type == '0'){  // 首次注册进来弹出
    //       this.$notify({
    //         title: '福利送达',
    //         dangerouslyUseHTMLString:true,
    //         customClass:'notify_give',
    //         message: '<span>登录成功啦！恭喜您获得3天SVIP会员（个人版），祝您使用愉快！</span><i class="notify_icon_smile"></i>',
    //         type: 'success',
    //         duration:6000
    //       });
    //     }
    //   });
    // },
    clickOther() {
      this.is_show_result = false;
    },
    exit() {
      this.$router.push('/');
      this.$clearLocal();
      this.$message({
        message: '退出登录成功！',
        // type: "success",
        duration: 2000
      });
    },
    get_person() {
      let that = this;
      this.$axios({
        method: 'get',
        url: '/api/customer/getperson'
      })
        .then(response => {
          if (response.data.code == 0) {
            this.person_message = response.data.data;
            // this.$store.commit('change_is_vip', response.data.data.vipLevel);
            // localStorage.setItem('photo', response.data.data.headImgUrl);
            // this.$store.commit('change_is_vip', 0)
            // console.log(this.$store.state.is_vip)
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    get_data() {
      let that = this;
      if (that.cancel01) {
        that.cancel01();
      }
      this.loading = true;
      this.is_show_result = true;
      this.$axios({
        method: 'get',
        url: '/api/search',
        params: {
          keyword: this.trimStr(that.input01)
        },
        cancelToken: new that.$axios.CancelToken(function executor(c) {
          if (that.cancel01) that.cancel01();
          that.cancel01 = c;
        })
      })
        .then(response => {
          if (response.data && response.data.code == 0) {
            this.loading = false;
            this.response = response.data.data;
            this.is_show_result = true;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    history_click(parm) {
      if (localStorage.getItem('user_id')) {
        this.input01 = parm;

        this.is_show_result = true;
        this.loading = true;
        this.get_data();
        this.history = false;
      } else {
        this.$router.push('/');
      }
    },
    // 删除一条记录
    remove_item(id) {
      this.$axios({
        method: 'get',
        url: '/api/customer/DeleteSearchLog',
        params: {
          ids: id
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.history_data = this.history_data.filter(item => item.id !== id);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 删除全部的历史记录
    remove_itemout() {
      let itemLog = '';
      this.history_data.forEach(item => {
        itemLog += item.id + ',';
      });
      itemLog = itemLog.substring(0, itemLog.lastIndexOf(','));
      this.$axios({
        method: 'get',
        url: '/api/customer/DeleteSearchLog',
        params: {
          ids: itemLog
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.history_data = [];
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    search_input() {
      // 确认搜索 记录搜索记录

      if (localStorage.getItem('user_id')) {
        this.$axios({
          method: 'get',
          url: '/api/customer/RecordSearchLog',
          params: {
            key: this.input01
          }
        })
          .then(res => {
            // console.log(res);
          })
          .catch(err => {
            console.log(err);
          });
        if (this.input01) {
          this.get_data();
        }
      } else {
        this.$router.push('/');
      }
      // if (this.history_data.indexOf(this.input01) == -1 && this.input01 != "") {
      //   this.history_data.unshift(this.input01);
      //   if (this.history_data.length > 10) {
      //     this.history_data = this.history_data.slice(0, 10);
      //     // console.log("history_data1", this.history_data);
      //   }
      //   // console.log("history_data", this.history_data);
      //   localStorage.setItem(
      //     "history_data",
      //     JSON.stringify(this.history_data.slice(0, 10))
      //   );
      // }
    },
    go_to_page01(id) {
      this.is_show_result = false;
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    go_to_page02(id) {
      this.is_show_result = false;
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    go_to_page03(id) {
      this.is_show_result = false;
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    toMatch() {
      let router = this.$router.resolve({
        path: `/inAnalysis/findTalent`
      });
      window.open(router.href, '_blank');
    },
    // 头部导航下拉菜单
    batchOperate(command) {
      switch (command) {
        case 'batch_remarks':
          this.dialogRemarks();
          break;
        case 'export_excel':
          this.exportExcel();
          break;
      }
    },
    /*头部导航下拉菜单    选择数据平台版本（快手，抖音 等）
    exportExcel() {
      let router = this.$router.resolve({
        path: `/talent_main/searchRoot`,
      })
      window.open(router.href, '_blank')
    },*/
    dialogRemarks() {
      // this.$router.push('')
      // console.log('@@')
    },
    // 点击搜索让记录存一下 下面记录框显示
    Inputfocus() {
      // this.history = true;
      if (localStorage.getItem('user_id')) {
        this.isHide = true;
        // this.$store.commit("reachHistory",this.history)

        // 请求搜索记录接口
        this.$axios({
          method: 'get',
          url: '/api/customer/GetSearchLog'
        })
          .then(res => {
            if (res.data.code == 0) {
              this.history_data = res.data.data;
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$router.push('/');
      }
    }
  },
  computed: {}
};
</script>
<style scoped lang="less">
.result_wraper {
  width: 100%;
  position: absolute;
  top: 44px;
  right: 0;
  background-color: transparent;
  // background-color: red;
  .posi_ab {
    left: 320px !important;
    top: 16px !important;
  }
  .result {
    position: absolute;
    top: 0;
    left: 194px;
    width: 600px;
    background-color: #ffffff;
    box-shadow: 0 0 20px 0 rgba(181, 181, 181, 0.3);
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px 30px 20px 20px;
    .video:last-of-type {
      border-bottom: 0;
    }
    .result_item {
      // margin-top: 30px;
      width: 100%;
      border-bottom: 1px solid #efefef;
      .video_header {
        // margin-bottom: 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > section {
          display: flex;
          align-items: center;
          > img:nth-child(1) {
            margin-right: 6px;
          }
          > span:nth-child(2) {
            font-weight: 600;
            margin-right: 6px;
            color: #222;
          }
          > span:nth-child(3) {
            display: inline-block;
            color: #999;
          }
        }
        // > span:nth-child(2) {
        //   color: #0077ff;
        //   cursor: pointer;
        // }
        .more {
          color: #888;
          cursor: pointer;
        }
        .more:hover {
          color: #ff924b;
        }
        display: flex;
        align-items: center;
      }
      .video_content {
        display: flex;
        align-items: center;
        button {
          padding: 0 16px;
          height: 32px;
          background-color: #ff7600;
          border-radius: 4px;
          font-size: 14px;
          color: #fff;
          text-align: center;
          line-height: 32px;
        }
        .list_box {
          width: 219px;
          > div:first-child {
            font-size: 14px;
            margin-bottom: 4px;
            color: #222222;
            cursor: pointer;
          }
          > div:nth-child(2) {
            margin-bottom: 4px;
            font-size: 14px;
            color: #222;
            display: flex;
            img {
              width: 20px;
              height: 20px;
              vertical-align: -5px;
              border-radius: 50%;
              margin-right: 7px;
              cursor: pointer;
            }
          }
          > div:last-child {
            font-size: 14px;
            color: #555555;
            span {
              letter-spacing: 0;
            }
          }
        }
        > img {
          width: 50px;
          object-fit: cover;
          height: 75px;
          border: 1px solid #e6e6e6;
          border-radius: 4px;
          cursor: pointer;
        }
      }
      > section {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative;
        min-height: 100px;
      }
      .videoBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
    }
    .result_item{
      .head_box,.cover_box{
        position: relative;
        width: 50px;
        height: 50px;
        margin-right: 12px;
        .live_gif_box{
          position: absolute;
          bottom: -1px;
          right: -1px;
          width: 18px;
          height: 18px;
          background-image: -webkit-gradient(linear,left top,right top,color-stop(1%,#ff295d),to(#fa4fa2)),-webkit-gradient(linear,left top,left bottom,from(#fff),to(#fff));
          background-image: linear-gradient(
      90deg
      ,#ff295d 1%,#fa4fa2),linear-gradient(#fff,#fff);
          background-blend-mode: normal,normal;
          border-radius: 6px 0 4px 0;
          font-size: 12px;
          color: #fff;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          padding-left: 2px;
        }
      }
      .text_box{
        &>div{
          font-size: 14px;
          margin-bottom: 4px;
          color: #222;
          cursor: pointer;
        }
      }
      &:last-child{
        border: none;
      }
    }
    > .flex_div {
      display: flex;
      overflow: hidden;
      justify-content: space-between;
      > section {
        vertical-align: top;
        display: inline-block;
        width: 345px;
        overflow: hidden;
        min-height: 100px;
        position: relative;
        .result_header {
          margin-bottom: 10px;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          > section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            > img:nth-child(1) {
              margin-right: 10px;
            }
            > span:nth-child(2) {
              margin-right: 10px;
              font-weight: 600;
              color: #222222;
            }
            > span:nth-child(3) {
              display: inline-block;
              color: #999999;
            }
          }
          > span:nth-child(2) {
            color: #0077ff;
            cursor: pointer;
          }
          display: flex;
          align-items: center;
        }
        .result_content {
          padding: 20px 0;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #e6e6e6;
          .logoBox {
            width: 50px;
            height: 50px;
            position: relative;
            // overflow: hidden;
            margin-right: 0;
            img {
              cursor: pointer;
              width: 50px;
              height: 50px;
              margin-right: 20px;
              vertical-align: top;
              border-radius: 50%;
              border: 1px solid #e5e5e5;
            }
            .delete {
              width: 58px;
              height: 24px;
              line-height: 24px;
              text-align: center;
              background-color: #f5f5f5;
              border-radius: 12px;
              border: solid 1px #e5e5e5;
              font-size: 14px;
              color: #222222;
              position: absolute;
              left: 50%;
              bottom: -2px;
              transform: translate(-50%, 0);
            }
          }
          button {
            // padding: 0 16px;
            width: 60px;
            height: 32px;
            background-color: #ff7600;
            border-radius: 4px;
            font-size: 14px;
            color: #fff;
            // text-align: center;
            // line-height: 32px;
          }
          > div {
            width: 180px;
            margin-left: 12px;
            margin-right: 38px;
            > div:first-child {
              font-size: 16px;
              margin-bottom: 4px;
              color: #222222;
              cursor: pointer;
            }
            > div:last-child {
              font-size: 14px;
              color: #555555;
            }
          }
          > img {
            width: 50px;
            height: 50px;
            border: 1px solid #e6e6e6;
            border-radius: 50%;
            cursor: pointer;
          }
        }
      }
    }
    // 达人
    .talentbox {
      display: flex;
      flex-wrap: wrap;
      padding: 14px 0 14px 0;
      .video_content:nth-of-type(1),
      .video_content:nth-of-type(2) {
        padding-bottom: 14px;
      }
      .video_content {
        width: 270px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 1px solid #efefef;
        }
        .dot {
          display: inline-block;
          width: 158px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .fans {
          font-size: 13px;
          color: #888;
        }
      }
    }
    // 商品
    .goodsbox {
      display: flex;
      flex-wrap: wrap;
      padding: 14px 0 14px 0;
      // border-bottom: 1px solid #efefef;
      .video_content:nth-of-type(1),
      .video_content:nth-of-type(2) {
        padding-bottom: 14px;
      }
      .video_content {
        width: 270px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 6px;
          border: 1px solid #efefef;
        }
        .dot {
          display: inline-block;
          width: 158px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .price {
          font-size: 13px;
          color: #ea1b0b !important;
        }
      }
    }
    // 直播记录
    .recordbox {
      display: flex;
      flex-wrap: wrap;
      padding: 14px 0 0 0;
      // border-bottom: 1px solid #efefef;
      .video_content:nth-of-type(1),
      .video_content:nth-of-type(2) {
        padding-bottom: 14px;
      }
      .video_content {
        width: 270px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 6px 4px 4px 4px;
          border: 1px solid #efefef;
        }
        .dot {
          display: inline-block;
          width: 158px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .dotname {
          color: #888;
        }
        .fans {
          font-size: 13px;
          color: #888;
        }
      }
    }
    .dotdot:hover {
      color: #ff924b !important;
    }
  }
}
.history {
  // min-height: 419px;
  background-color: #ffffff;
  box-shadow: 0 0 20px 0 rgba(181, 181, 181, 0.3);
  border-radius: 4px;
  padding: 15px 0;
  box-sizing: border-box;
  li:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    font-size: 12px;
    height: 24px;
    color: #888888;
    span,
    img {
      display: block;
    }
    img {
      width: 16px;
      height: 16px;
      position: relative;
      z-index: 999;
      right: -3px;
    }
  }
  li:not(:nth-child(1)):hover {
    background-color: #f5f5f5;
    .appa {
      display: block;
    }
  }
  li {
    span {
      display: block;
      height: 36px;
      line-height: 34px;
      width: 330px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    height: 36px;
    padding: 0 20px;
    font-size: 14px;
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  img {
    width: 10px;
    position: relative;
    z-index: 999;
    height: 10px;
    cursor: pointer;
    display: none;
  }
}

.avatar {
  display: flex;
  align-items: center;
  position: relative;
  width: 34px;
  height: 100px;
  margin-left: 40px;
  .vip_wrap {
    width: 16px;
    height: 12px;
    position: absolute;
    bottom: 39px;
    right: -5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  > .message {
    .bg01 {
      background-image: url('../assets/meng/novip.png');
      .novip {
        background: #414558;
        width: 244px;
        height: 60px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        padding: 20px 15px 0 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        span {
          color: #fff !important;
          font-size: 13px;
          padding-top: 20px;
        }
        > button {
          width: 72px;
          height: 28px;
          line-height: 28px;
          border-radius: 20px;
          background: #fee0c8;
          color: #222;
          margin-top: -4px;
        }
      }
    }
    .bg02 {
      background-image: url('../assets/meng/vip.png');
      .vipbox {
        width: 244px;
        height: 60px;
        overflow: hidden;
        background: #414659;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;
        > div {
          > p {
            padding-top: 14px;
            span {
              font-size: 14px;
              color: #fff !important;
            }
          }
          > div {
            font-size: 12px;
            color: #b3b4bc;
            display: flex;
            > p {
              width: 66px;
              overflow: hidden;
              height: 14px;
            }
          }
        }
        button {
          width: 72px;
          height: 28px;
          line-height: 26px;
          border-radius: 20px;
          background-image: linear-gradient(#feeee0, #fdcda5);
          color: #222;
          margin-top: 16px;
        }
      }
    }
    > div:first-child {
      > p:first-child {
        font-size: 18px;
        color: #222;
        padding-bottom: 18px;
      }
      > p:last-child {
        > span:nth-child(1) {
          font-size: 12px;
          color: #8e9298;
          line-height: 28px;
        }
        > span:nth-child(2) {
          font-size: 12px;
          line-height: 28px;
          color: #434951;
        }
        // > button:nth-child(3) {
        //   width: 72px;
        //   height: 28px;
        //   border-radius: 4px;
        //   border: solid 1px #555555;
        //   text-align: center;
        //   font-size: 12px;
        //   color: #555555;
        //   line-height: 24px;
        //   background-color: transparent;
        //   float: right;
        // }
      }
      width: 284px;
      //   height: 100px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding-left: 20px;
      padding-top: 26px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    ul {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      li:nth-of-type(1) {
        padding-top: 24px;
      }
      li:last-of-type {
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: 1px solid #e5e5e5;
      }
      li {
        cursor: pointer;
        width: 100%;
        padding: 12px 0;
        padding-left: 18px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #222222;
        img {
          margin-right: 15px;
        }
        .img01 {
          width: 16px;
          height: 16px;
        }
        .img02 {
          width: 16px;
          height: 14px;
        }
        .img03 {
          width: 16px;
          height: 15px;
        }
      }
      li:hover {
        background: #f5f7fa;
      }
    }
    position: absolute;
    top: 81px;
    right: 0px;
    z-index: 99999999;
    width: 284px;
    background-color: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(181, 181, 181, 0.3);
    border-radius: 6px;
    box-sizing: border-box;
    display: none;
  }
  > img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e6e6e6;
    cursor: pointer;
  }
}
.avatar:hover {
  .message {
    display: block !important;
  }
}
.input_group {
  position: relative;
  display: inline-block;
  //收缩起来的侧边栏
  margin-left: 195px;
  position: relative;
  width: 400px;
  height: 32px;
  border-radius: 2px;
  border: solid 2px #fd7f2c;
  box-sizing: border-box;
  .dropdown {
    position: absolute;
    left: -100px;
    top: -3px;
    .el-button {
      width: 88px;
      height: 34px;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      .el-icon--right {
        width: 10px;
        height: 10px;
        font-size: 10px;
        color: #555555;
        font-weight: 600;
      }
    }

    .el-button--mini {
      padding: 8px;
      display: block;
      font-size: 14px;
      color: #555;
      line-height: 16px;
    }
    .el-button:hover {
      color: #555;
      border-color: #e5e5e5;
      background-color: transparent;
    }
    // 抖音，快手logo
    .ddlogo {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-top: -2px;
      margin-right: 2px;
    }
  }
  input {
    width: 100%;
    font-size: 14px;
    height: 100%;
    box-sizing: border-box;
    padding-left: 11px;
    padding-right: 38px;
    border: none;
  }
  .input_group-img {
    position: absolute;
    right: -1px;
    cursor: pointer;
    top: -1px;
    text-align: center;
    width: 42px;
    height: 30px;
    background-color: #fd7f2c;
    border-radius: 2px;
    img {
      // margin-top: 6px;
      width: 16px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
// 侧边栏展开的状态
.ml_330 {
  margin-left: 320px;
}
// 搜索框的边距
.posi_ab {
  left: 318px !important;
}
#my_header {
  padding-top: 60px;
  position: relative;
  z-index: 300;
  .activity_btn {
    flex: 1;
    padding-right: 10px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: right;
    img {
      width: 74px;
      height: 46px;
    }
    .btn {
      // margin-left: 5px;
      font-size: 14px;
      font-weight: 600;
      color: #d0610c;
      display: flex;
      align-items: center;
      span {
        margin-left: 5px;
      }
    }
    .vip {
      width: 32px;
      height: 32px;
      display: inline-block;
      vertical-align: middle;
    }
    .vip0,
    .vip1 {
      background: url('~@/assets/shi/svip.png');
      background-size: cover;
    }
    .vip2 {
      background: url('~@/assets/shi/plus.png');
      background-size: cover;
    }

    .vip3,
    .vip4 {
      background: url('~@/assets/shi/vip.png');
      background-size: cover;
    }
  }
  .nkhd_btn{
    flex: 1;
    padding-left: 28px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    img{
      width: 160px;
      height: 39px;
    }
  }
  .down_app{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    text-align: right;
    position: relative;
    .down_app_box{
      width: 94px;
      height: 34px;
      line-height: 34px;
      border-radius: 4px;
      border: solid 1px #fd7f2c;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img{
        width: 13px;
        height: 18px;
      }
      span{
        font-size: 14px;
        font-weight: 600;
        color: #fd7f2c;
        margin-left: 6px;
      }
    } 
    .help_give_vip{
      position: absolute;
      top: -11px;
      right: 100px;
      width: 210px;
      height: 46px;
      margin-right: 25px;
      cursor: pointer;
      .bgc_img{
        width: 100%;
        height: 100%;
      }
      .btn_img{
        position: absolute;
        top: 11px;
        right: -5px;
        width: 37px;
        height: 37px;
        animation: myfirst 1.2s infinite;
      }
    }
  }
  @keyframes myfirst {
    0%{
      transform: scale(1);
    }
    50%{
      transform: scale(1.08);
    }
    100%{
      transform: scale(1);
    }
  }
  //   height: 100vh;
  > div {
    // min-width: 1300px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 60px;
    background-color: #fff;
    width: 100%;
    padding-right: 20px;
    box-sizing: border-box;
    // box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
    //   0 9px 28px rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
  }
}
.frame_box{
  // padding: 15px 18px 14px;
  box-sizing: border-box;
  .code_img{
    width: 110px;
    height: 110px;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.liveNull {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 16px;
  color: #888;
  // margin-top: 37px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  img {
    display: block;
    width: 100px;
    margin: 0 auto;
    height: 62px;
    padding-top: 8px;
  }
  span {
    display: inline-block;
    width: 120px;
    margin: 0 auto;
    font-size: 13px;
    color: #b5b5b5;
    margin-top: -2px;
    padding-bottom: 30px;
  }
}
.el-dropdown-menu--small .el-dropdown-menu__item {
  height: 28px;
  line-height: 28px;
  padding: 0 18px !important;
  font-size: 14px;
  color: #555;
  img {
    display: inline-block;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    margin-top: -2px;
  }
  .el-popper {
    width: 88px;
    left: 456px !important;
  }
}
</style>
